<template>
    <el-form ref="formRef" :model="formState" class="form-body" label-suffix="：" label-width="auto">
        <el-form-item v-show="page" label="店铺Logo">
            <FormAddGallery v-model:photo="formState.shop_logo" :isMultiple="false"></FormAddGallery>
        </el-form-item>
        <el-form-item :rules="[{ required: true, message: '请输入店铺名称!' }]" label="店铺名称" prop="shop_title">
            <el-input v-model="formState.shop_title" placeholder="请输入店铺名称" />
            <div class="extra">店铺名称应尽量简洁易记, 建议15字以内</div>
        </el-form-item>
        <el-form-item label="创建时间" prop="account_no">
            <p>{{ shopInfo.add_time }}</p>
        </el-form-item>
        <el-form-item label="店铺简介" prop="description">
            <el-input v-model="formState.description" :rows="4" type="textarea" />
        </el-form-item>
    </el-form>
</template>
<script lang="ts" setup>

import { ref, shallowRef, reactive } from "vue";
import { FormAddGallery } from "@/components/gallery";
import { message } from "ant-design-vue";
import { useRouter } from "vue-router";
import { useUserStore } from "@/store/user";
import type {ShopInfoFormState} from "@/types/merchant/setting/team.d";
import {updateShopInfo} from "@/api/merchant/setting/team";
// 父组件回调
const emit = defineEmits([
  "submitCallback", //确认后回调
  "update:confirmLoading", //确认按钮的loading状态
  "close" //关闭弹窗
]);
const props = defineProps({
act: {
    type: String,
    default: ""
}, id: {
    type: Number,
    default: 0
}, type: {
    type: Number,
    default: 1
}, page: {
    type: Number,
    default: 1
},
isDialog: Boolean
});
const shopInfo = reactive(JSON.parse(JSON.stringify(useUserStore().shopInfo)))
const query = useRouter().currentRoute.value.query;
const action = ref<string>(props.isDialog ? props.act : String(query.act));
const id = ref<number>(props.isDialog ? props.id : Number(query.id));
const operation = action.value === "add" ? "create" : "update";
const formRef = shallowRef();
const formState = ref<ShopInfoFormState>({
    shop_id: shopInfo.shop_id,
    shop_title: shopInfo.shop_title,
    shop_logo: shopInfo.shop_logo,
    description: shopInfo.description,
});

const onSubmit = async () => {
    await formRef.value.validate();
try {
    emit("update:confirmLoading", true);
    const result = await updateShopInfo({...formState.value });
    await formRef.value.resetFields();
    message.success(result.message);
    emit("submitCallback", result);
} catch (error: any) {
    message.error(error.message);
} finally {
  emit("update:confirmLoading", false);
}
};
// 表单提交
const onFormSubmit = () => {
  onSubmit();
};
defineExpose({ onFormSubmit });
</script>
<style lang="less" scoped>

</style>
